<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#button1").click(function () {
            $("#p1").text("正在查询...");
            $.ajax({
                url: 'http://121.36.19.47/test.php',
                type: 'get',
                data: {
                    question: $("#textarea1").val(),
                },
                dataType: 'json',
                success: function (data) {
                    var obj = JSON.parse(data);
                    function changesta(){
                        if(obj.code == 200){
                            $("#button1").removeClass();
                            $("#button1").addClass('btn btn-success');
                        }else{
                            $("#button1").removeClass();
                            $("#button1").addClass('btn btn-warning');
                        }
                    }
                    if(obj.code >=200 && obj.code < 300){
                        $("#p1").html("题目：" + obj.tm + "<br>" + "选项：" + obj.xx + "<br>" + "答案：" + obj.da + "<br>"+"解析："+obj.jx);
                        changesta();
                    }
                    else if (obj.code >=500 && obj.code < 600){
                        $("#p1").html("题库出现问题" +"<br>"+ obj.code +"<br>" + obj.msg);
                        changesta()
                    }
                    else{
                        $("#p1").html(obj.code +"<br>" + obj.msg);
                        changesta()
                    }
                },
                error: function () {
                    alert("something wrong");
                }
            })
        })
    })
</script>
<style type="text/css">
    #div1 div{
        display: flex;
        flex-direction: column;
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 10px;
    }
    @media all and (orientation : portrait) {
        #div1 div{
            margin-left: 3%;
            margin-right: 3%;
        }

    }
</style>
<div id = "div1">
    <div>
        <textarea id="textarea1" autofocus="autofocus" placeholder="请输入题目"  class="form-control" ></textarea>
    </div>
    <div>
        <button id = "button1" type="button" value="查找" class="btn btn-info" >查找</button>
    </div>
    <div class="panel panel-default" id = "div2">
        <div class="panel-heading" id = "div3" style="margin-top: 0;margin-right: 0;margin-left: 0">查询结果</div>
        <div class="panel-body" style="margin-top: 0;margin-right: 0;margin-left: 0"><p id="p1"></p></div>
    </div>
</div>
</body>
</html>